<template>
	<view class="rule" @click="$emit('close')">
			<image class="bg1 ani" src="../../../static/bb.png" mode="widthFix"></image>
			<view class="a">
				<image class="bg" v-if="!giftInfo.code" src="../../../static/cj/bj.png" mode="scaleToFill"></image>
				<image class="bg2" v-if="giftInfo && giftInfo.code" src="../../../static/cj/ybg.png" mode="scaleToFill"></image>
				<image class="jx" v-if="giftInfo.code" src="../../../static/cj/jx.png" mode="scaleToFill"></image>
				<image class="jx" v-if="!giftInfo.code" src="../../../static/cj/jx2.png" mode="scaleToFill"></image>
				<view class="jx flex flex-col items-center justify-center" v-if="!giftInfo.code">
					<text>很遗憾你没有中奖</text>
					<view class="zjyy">{{giftInfo.remarks}}</view>
				</view>
				<view class="jx flex flex-col items-center" v-if="giftInfo.code">
					<image class="gf" src="../../../static/cj/gf.png" mode="widthFix"></image>
					<view class="mz">
						恭喜你抽中盲盒一个
					</view>
					<view class="ti">
						请凭兑奖码至
					</view>
					<view class="ti">
						{{name}}兑换奖品
					</view>
					<view class="btn flex items-center justify-center">
						{{ giftInfo.getState > 0 ? `您已兑换奖品！` : giftInfo.getState === -1 ? '很遗憾，您未中奖！' : `兑奖码：${ giftInfo.code }` }}
					</view>
				</view>
			</view>
		
		<!-- <image src="../../../static/close.png" class="close" @click="$emit('close')" mode="widthFix"></image>
		<view class="form">
			<image src="../../../static/r-t.png" mode="widthFix"></image>
			
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name:''
			}
		},
		mounted() {
			this.$request('/api/type/exchange_name', {}, 'get').then(res => {
				console.log(res.data.data[0])
				this.name = res.data.data[0].dictValue
			})
		},
		props: {
			type:{
				type: String,
				default: 'yes'
			},
			value: {
				type: Boolean,
				default: false
			},
			giftInfo:{
				type:Object,
				default:{}
			}
		}
	}
</script>

<style scoped lang="less">
	.rule {
		position: fixed;
		background: rgba(0, 0, 0, 0.5);
		z-index: 9;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		
		@keyframes scaleAnim {
		    from {
		      transform: scale(0);
		    }
		    to {
		      transform: scale(1);
		    }
		  }
		  .a {
			  height: 100%;
			  animation: scaleAnim 1.5s forwards;
		  }
	}
	.bg2{
		width: 116%;
		    height: 90vh;
		    position: absolute;
		    left: -6%;
		    right: 0;
		    bottom: 0;
		    top: 0;
		    margin: auto;
	}

	.bg1 {
		position: absolute;
		top: -25%;
		left: 6%;
		right: 0;
		bottom: 230rpx;
		margin: auto;
		width: 90%;
		animation: ani 1.5s infinite linear alternate-reverse;
		transform-origin: 45.5% 63%;
	}

	@keyframes ani {
		from {
			transform: scale(0.8);
			opacity: 0.7;
		}

		30% {
			transform: scale(1);
		}

		60% {
			transform: scale(0.9);
			opacity: 1;
		}

		80% {
			transform: rotateZ(30deg);
		}

		100% {
			transform: rotateZ(-30deg);
			opacity: 1;
		}
	}

	.bg {
		    width: 115%;
		    height: 90vh;
		    position: absolute;
		    left: -7%;
		    right: 0;
		    bottom: 0;
		    top: 0;
		    margin: auto;
	}

	.jx {

		width: 60%;
		height: 550rpx;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		top: -3%;
		margin: auto;
		font-size: 36rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #5C0202;
		line-height: 83rpx;

		text {
			margin: -40rpx 0 80rpx;
		}

		.noimg {
			width: 85%;
			height: 0;
		}
		.gf{
			width: 40%;
			height: 0;
			margin: 40rpx 0 0;
		}
		.mz{
			font-size: 41rpx;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: #EE2222;
			line-height: 121rpx;
		}
		.ti{
			font-size: 28rpx;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: #000000;
			line-height: 32rpx;
		}
		.btn{
			width: 90%;
			height: 110rpx;
			background: #FF5353;
			border-radius: 10rpx;
			font-size: 36rpx;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: #5C0202;
			margin: 30rpx 0 0;
		}

	}

	.close {
		width: 40rpx;
		height: 0;
		position: absolute;
		top: 23%;
		right: 11%;
	}

	.form {
		position: absolute;
		height: 44vh;
		width: 63%;
		top: 27%;
		left: 20%;

		image {
			width: 68%;
			height: 0;
			margin: 0 16%;
		}
	}
	.zjyy{
		font-size: 50rpx;
		line-height: 70rpx;
		font-weight: 800;
		color: #5C0202;
		padding: 0 20rpx 0 30rpx;
	}
</style>